<template>
  <div class="container">
    <div class="header">
      <div class="left">
        <el-select v-model="shopType" class="select">
          <template #prefix>
            <div class="select-prefix">所属平台：</div>
          </template>
          <el-option
            v-for="item in shopTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-date-picker
          class="date-picker"
          type="daterange"
          range-separator="-"
          start-placeholder="选择日期"
          end-placeholder="选择日期"
        >
        </el-date-picker>
        <el-input
          class="date-picker"
          style="margin-left: 20px"
          prefix-icon="el-icon-search"
          placeholder="账号"
        ></el-input>
      </div>
      <div class="right">
        <el-button class="query">查询</el-button>
        <el-button plain class="clear">清空</el-button>
      </div>
    </div>
    <el-card class="content">
      <div class="table-header">
        <span class="left">列表</span>
        <div class="right">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-plus"
            @click="addPeople"
            >新增
          </el-button>
          <el-button
            type="success"
            size="mini"
            icon="el-icon-download"
            :loading="exportLoading"
            @click="exportUserExcel"
            >导出</el-button
          >
          <el-button size="mini" icon="el-icon-refresh-right" class="refresh"
            >刷新</el-button
          >
        </div>
      </div>
      <el-table v-loading="loading" :data="userList">
        <el-table-column align="center" label="序号" type="index" width="50">
        </el-table-column>

        <el-table-column align="center" label="用户名">
          <template slot-scope="scope">{{
            scope.row.userName ? scope.row.userName : "--"
          }}</template>
        </el-table-column>

        <el-table-column align="center" label="姓名">
          <template slot-scope="scope">{{
            scope.row.nickName ? scope.row.nickName : "--"
          }}</template>
        </el-table-column>

        <el-table-column align="center" label="手机号码">
          <template slot-scope="scope">{{
            scope.row.phonenumber ? scope.row.phonenumber : "--"
          }}</template>
        </el-table-column>

        <el-table-column align="center" label="所属平台">
          <template slot-scope="scope">
            <span v-if="scope.row.platform === 'Visitor'">游客端</span>
            <span v-else-if="scope.row.platform === 'Business'">商户端</span>
            <span v-else-if="scope.row.platform === 'Manager'">管理端</span>
            <span v-else style="color: red">未知</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="创建时间">
          <template slot-scope="scope">{{
            scope.row.createTime ? scope.row.createTime : "--"
          }}</template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-link
              type="primary"
              style="margin-right: 10px"
              @click="changeUserInfo(scope.row)"
              >修改</el-link
            >
            <el-link type="danger" @click="deletePwd(scope.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-card>

    <!-- 重置密码 -->
    <change-pwd
      :dialogVisible="dialogVisible"
      :dialogForm="dialogForm"
      @closeChangedia="closeChangedia"
      @changeUserFun="changeUserFun"
    />
    <!-- 新增用户 -->
    <add-new
      :addDialog="addDialog"
      @closeAdddia="closeAdddia"
      @handleAddUser="handleAddUser"
    />
  </div>
</template>
<script>
import moment from "moment";
import {
  listUser,
  addUser,
  delUser,
  updateUser,
  exportUser,
} from "@/api/system/user";
import changePwd from "./comp/changePwd.vue";
import addNew from "./comp/addNew.vue";

export default {
  components: {
    changePwd,
    addNew,
  },
  data() {
    return {
      exportLoading: false,
      // 新增用户
      addDialog: false,
      // 修改密码
      dialogVisible: false,
      dialogForm: {},
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        reasonable: true,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined,
      },
      loading: false,
      shopType: "-1",
      shopTypeList: [
        { label: "全部", value: "-1" },
        { label: "服装", value: "0" },
        { label: "水果", value: "1" },
      ],
      searchText: "",
      userList: [],
      currentPage: 1,
      lookVisible: false,
      processVisible: false,
    };
  },
  computed: {
    headerCellStyle() {
      return {
        "font-size": "16px",
        "font-weight": 400,
        color: "#999999",
        background: "#fff",
      };
    },
  },
  created() {
    this.getList();
  },
  methods: {
    // 导出用户
    exportUserExcel() {
      this.exportLoading = true;
      exportUser()
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            // 创建一个a标签
            const link = document.createElement("a");
            link.href = res.data;
            // link.download = "用户数据" + moment() + ".xlsx";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            this.msgSuccess("导出成功");
          } else {
            this.msgError("导出失败");
          }
          this.exportLoading = false;
        })
        .catch((err) => {
          console.log(err);
          this.msgError("导出失败");
          this.exportLoading = false;
        });
    },

    // 删除用户
    deletePwd(row) {
      this.$confirm("确定删除该账户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delUser(row.userId)
          .then((res) => {
            if (res.code === 200) {
              this.msgSuccess("删除成功");
              this.getList();
            } else {
              this.msgError("删除失败");
            }
          })
          .catch(() => {
            this.msgError("删除失败");
          });
      });
    },
    // 新增用户
    handleAddUser(form) {
      addUser(form)
        .then((res) => {
          if (res.code === 200) {
            this.msgSuccess("新增成功");
            this.closeAdddia();
            this.getList();
          } else {
            this.msgError("新增失败");
          }
        })
        .catch(() => {
          this.msgError("新增失败");
        });
    },
    // 关闭新增账户
    closeAdddia() {
      this.addDialog = false;
    },
    // 新增账户
    addPeople() {
      this.addDialog = true;
    },
    // 关闭重置密码
    closeChangedia() {
      this.dialogVisible = false;
      this.dialogForm = {};
    },

    /** 修改  */
    changeUserInfo(row) {
      console.log(row);
      this.dialogVisible = true;
      this.dialogForm = row;
    },

    // 确定修改用户信息
    changeUserFun(data) {
      console.log(data);
      updateUser(data)
        .then((res) => {
          if (res.code === 200) {
            this.msgSuccess("修改成功");
            this.closeChangedia();
            this.getList();
          } else {
            this.msgError("操作失败");
          }
        })
        .catch(() => {
          this.msgError("操作失败");
        });
    },

    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    look() {
      this.lookVisible = true;
    },
    process() {
      this.processVisible = true;
    },
    handleSizeChange() {},
    handleCurrentChange() {},
  },
};
</script>
<style scoped lang="scss">
.container {
  height: 100%;
  width: 100%;
  background-color: var(--theme_bg_color);
  display: flex;
  flex-direction: column;
  .header {
    height: 80px;
    background: #ffffff;
    border-radius: 8px 8px 8px 8px;
    padding: 24px;
    margin-bottom: 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      .select {
        height: 32px;
        width: 154px;
        margin-right: 16px;
        ::v-deep .el-input--prefix .el-input__inner {
          padding-left: 81px;
        }
      }
      .select-prefix {
        font-size: 14px;
        font-weight: 400;
        color: #8f959e;
        line-height: 36px;
      }
      .date-picker {
        height: 36px;
        width: 338px;
        margin-top: 3px;
      }
    }
    .right {
      display: flex;
      align-items: center;
      .query {
        width: 72px;
        height: 32px;
        border: 1px solid #3370ff;
        color: #3370ff;
      }
      .clear {
        width: 72px;
        height: 32px;
      }
    }
  }
  .content {
    flex: 1;
    background: var(--nav_bg_color);
    .table-header {
      padding: 21px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e4e7ed;
      background-color: #ffffff;
      .left {
        font-size: 16px;
        font-weight: 400;
        color: #111111;
      }
      .right {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .export {
          background: #79cf1c;
          border: none;
        }
      }
    }
    .pagination {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
      background-color: #ffffff;
    }
    .look {
      margin: 0 20px;
    }
  }
}
.tag {
  width: 74px;
  height: 24px;
  border-radius: 2px 2px 2px 2px;
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  i {
    margin-right: 5px;
  }
}
.business {
  background: #d6e2ff;
  color: #245bdb;
}
.follow-up {
  background: #fde9e8;
  color: #f54a45;
}
.title {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  .icon {
    width: 4px;
    height: 16px;
    background: #3370ff;
    margin-right: 10px;
  }
  .desc {
    font-size: 16px;
    font-weight: 400;
    color: #333333;
  }
}
.formItem {
  width: 100%;
  display: flex;
  margin-bottom: 24px;
  .left,
  .right {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .left {
    margin-right: 12px;
  }
  .right {
    margin-left: 12px;
    img {
      width: 88px;
      height: 88px;
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #d0d3d6;
    }
  }
  .label {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    margin-bottom: 20px;
    span {
      color: #f54a45;
    }
  }
  .content {
    display: flex;
    align-items: center;
    .choose_item {
      margin-right: 30px;
      display: flex;
      align-items: center;
      .active {
        color: #3370ff;
      }
      img {
        width: 16px;
        height: 16px;
        margin-right: 10px;
      }
      span {
        font-size: 14px;
        font-weight: 400;
        color: #999999;
      }
    }
  }
}
</style>
